<!--
 * @Description: 
 * @Date: 2021-11-02 17:04:29
 * @LastEditTime: 2021-11-03 14:23:58
-->
<template>
  <div class="box">
    <van-nav-bar
      title="新闻头条"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- list -->
    <keep-alive>
      <van-tabs
        v-model:active="active"
        swipeable
        @change="change"
        sticky
      >
        <van-tab
          v-for="(item,index) in tab"
          :title="item.title"
          :key="item.value+index"
        >
          <ul class="ul">
            <li class="title">{{data.date}}</li>
            <li
              v-for="(item,index) in list"
              :key="index"
              class="item"
              @click="todetail(item.url)"
            >
              <div class="left">{{index+1}}</div>
              <div class="right">
                <van-image
                  width="10rem"
                  height="10rem"
                  fit="contain"
                  :src="item.thumbnail_pic_s"
                />
                <p>{{item.date}}</p>
                <p>{{item.title}}</p>
              </div>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </keep-alive>
    <fill />
  </div>
</template>
<script>
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { Journalism } from "../../api/index.js";
export default {
  setup() {
    const { proxy } = getCurrentInstance();

    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    let list = ref([]);
    const tab = reactive([
      { title: "推荐", value: "top" },
      { title: "国内", value: "guonei" },
      { title: "军事", value: "junshi" },
      { title: "汽车", value: "qiche" },
      { title: "健康", value: "jiankang" },
    ]);

    const active = ref(0);
    const key = "0c245ab1f613c0a0bb97526000ed5800";
    let data = {
      key: key,
      page: "1",
      page_size: "30",
      type: tab[0].value,
      is_filter: "1",
    };
    const change = (e) => {
      data.type = tab[e].value;
      init(data);
    };
    const init = (data) => {
      Journalism(data).then((res) => {
        if (res.error_code == 0) {
          proxy.list = res.result.data;
        }
      });
    };
    const todetail = (url) => {
      window.location.href = url;
    };
    onMounted(() => {
      const { proxy } = getCurrentInstance();
      init(data);
    });
    return {
      active,
      tab,
      data,
      list,
      onClickLeft,
      change,
      init,
      todetail,
    };
  },
};
</script>
<style scoped>
.box :deep() .van-nav-bar .van-icon {
  color: #222 !important;
}
.box :deep() .van-nav-bar__text,
.van-nav-bar .van-icon {
  color: #222 !important;
}
</style>
<style scoped lang="stylus">
.box {
  width: 100%;
  height: 100%;
}

.ul {
  padding: 0 30px;

  .title {
  }

  .item {
    display: flex;
    padding-bottom: 5px;
    margin-bottom: 10px;
    justify-content: space-between;
    border-bottom: 1px #eee solid;

    .left {
      display: flex;
      align-items: center;
    }

    .right {
      margin-left: 30px;
      flex: 1;
    }
  }
}
</style>